<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="SPU名称">{{ spu.spuName }}</el-form-item>
      <el-form-item label="SKU名称">
        <el-input v-model="skuInfo.skuName" placeholder="SKU名称"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input
          v-model="skuInfo.price"
          type="number"
          placeholder="价格(元)"
        ></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input v-model="skuInfo.weight" placeholder="重量(千克)"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input
          v-model="skuInfo.skuDesc"
          type="textarea"
          rows="4"
          placeholder="规格描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true" label-width="80px">
          <el-form-item
            v-for="attr in attrInfoList"
            :key="attr.id"
            :label="attr.attrName"
          >
            <el-select v-model="attr.attrIdAndValueId" placeholder="请选择">
              <el-option
                v-for="attrValue in attr.attrValueList"
                :key="attrValue.id"
                :label="attrValue.valueName"
                :value="`${attr.id}:${attrValue.id}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline="true" label-width="80px">
          <el-form-item
            v-for="saleAttr in spuSaleAttrList"
            :key="saleAttr.id"
            :label="saleAttr.saleAttrName"
          >
            <el-select v-model="saleAttr.attrIdAndValueId" placeholder="请选择">
              <el-option
                v-for="saleAttrValue in saleAttr.spuSaleAttrValueList"
                :key="saleAttrValue.id"
                :label="saleAttrValue.saleAttrValueName"
                :value="`${saleAttr.id}:${saleAttrValue.id}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table
          border
          stripe
          :data="spuImageList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="80px"> </el-table-column>
          <el-table-column label="图片" width="width">
            <template #default="{ row }">
              <img :src="row.imgUrl" style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" width="width">
          </el-table-column>
          <el-table-column label="操作" width="width">
            <template #default="{ row }">
              <el-button
                v-if="row.isDefault === 0"
                type="primary"
                size="mini"
                @click="changeDefault(row)"
              >
                设为默认</el-button
              >
              <el-button v-if="row.isDefault === 1" type="success" size="mini">
                默认</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getSpuImageListApi, getSpuSaleAttrListApi, getAttrInfoListApi } from '@/api/sku'

export default {
  data () {
    return {
      // 图片的数据
      spuImageList: [],
      // 销售属性的数据
      spuSaleAttrList: [],
      // 平台属性的数据
      attrInfoList: [],
      // 需要收集的sku数据的字段
      skuInfo: {
        // 第一类数据 -> 父组件给的数据
        category3Id: '',
        spuId: '',
        tmId: '',
        // 第二类数据 -> 通过v-model双向绑定收集的数据
        skuName: '',
        price: 0,
        weight: '',
        skuDesc: '',
        // 第三类数据 -> 发送请求获取的数据
        // 收集图片的字段
        skuImageList: [
          // {
          //   id: 0,
          //   imgName: string,
          //   imgUrl: string,
          //   isDefault: string,
          //   skuId: 0,
          //   spuImgId: 0
          // }
        ],
        // 默认图片
        skuDefaultImg: '',
        // 平台属性
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   valueId: 0
          // }
        ],
        // 销售属性
        skuSaleAttrValueList: [
          // {
          //   id: 0,
          //   saleAttrId: 0,
          //   saleAttrName: string,
          //   saleAttrValueId: 0,
          //   saleAttrValueName: string,
          //   skuId: 0,
          //   spuId: 0
          // }
        ]
      },
      // spu的数据
      spu: {},
      // 收集图片的数据字段 -> 当前收集的数据缺少isDefault字段,将来提交给服务器数据的时候,需要整理参数
      imageList: []
    }
  },
  methods: {
    // 保存按钮的回调
    save () {
      // 整理参数
      // 方法一
      // 整理平台属性
      const arr = []
      this.attrInfoList.forEach(item => {
        if (item.attrIdAndValueId) {
          const [attrId, valueId] = item.attrIdAndValueId.split(':')
          // 携带的应该是个对象
          arr.push({ attrId, valueId })
        }
      })
      // 将整理好的参数赋值给skuInfo.skuAttrValueList
      this.skuInfo.skuAttrValueList = arr
      // 方法二
      // this.skuInfo.skuAttrValueList = this.attrInfoList.reduce((prev, item) => {
      //   if (item.attrIdAndValueId) {
      //     const [attrId, valueId] = item.attrIdAndValueId.split(':')
      //     prev.push({ attrId, valueId })
      //   }
      //   return prev
      // }, [])
    },
    // 取消按钮的回调
    cancel () {
      // 自定义事件进行切换场景
      this.$emit('changeScenes', 0)
      // 清除数据
      Object.assign(this._data, this.$options.data())
    },
    // 设为默认按钮的回调
    changeDefault (row) {
      // 排他操作
      this.spuImageList.forEach(item => {
        item.isDefault = 0
      })
      row.isDefault = 1
      // 收集默认图片的地址
      this.skuInfo.skuDefaultImg = row.imgUrl
    },
    // el-table多选框按钮的回调
    handleSelectionChange (val) {
      console.log(val)
      // 获取到用户选中图片的数据,但是缺少了isDefault字段
      this.imageList = val
    },
    // 获取SkuForm数据
    async getData (category1Id, category2Id, spu) {
      // 收集父组件传递过来的数据
      this.skuInfo.category3Id = spu.category3Id
      this.skuInfo.spuId = spu.id
      this.skuInfo.tmId = spu.tmId
      this.spu = spu
      try {
        // 获取图片的数据
        const { data } = await getSpuImageListApi(spu.id)
        this.spuImageList = data
        this.spuImageList.forEach(item => {
          item.isDefault = 0
        })
        // 获取销售属性的数据
        const result = await getSpuSaleAttrListApi(spu.id)
        this.spuSaleAttrList = result.data
        // 获取平台属性的数据
        const res = await getAttrInfoListApi(category1Id, category2Id, spu.category3Id)
        this.attrInfoList = res.data
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
